<template>
  <div class="evaluation-report-container">
    <!-- 加载状态 -->
    <div v-if="loading || generating" class="loading-section">
      <div v-if="generating" class="generating-section">
        <el-icon class="is-loading"><Loading /></el-icon>
        <h3>正在生成面试报告</h3>
        <p>AI正在分析面试数据，请稍候...</p>
      </div>
      <el-skeleton v-else :rows="8" animated />
    </div>
    
    <!-- 报告内容 -->
    <div v-else-if="!loading && !generating && reportData.ai_summary" class="report-content">
      <!-- 报告头部 -->
      <div class="report-header">
        <div class="header-actions">
          <el-button @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回
          </el-button>
        </div>
      
        <div class="candidate-basic-info">
        <div class="candidate-avatar">
          <el-avatar :size="80" :src="reportData.candidate_info.avatar">
            {{ reportData.candidate_info.name.charAt(0) }}
          </el-avatar>
        </div>
        <div class="candidate-details">
          <h2>{{ reportData.candidate_info.name }}</h2>
          <p class="position">{{ reportData.candidate_info.job_title }}</p>
          <div class="candidate-contact">
            <span class="contact-item">
              <el-icon><Message /></el-icon>
              {{ reportData.candidate_info.email }}
            </span>
            <span class="contact-item" v-if="reportData.candidate_info.phone">
              <el-icon><Message /></el-icon>
              {{ reportData.candidate_info.phone }}
            </span>
          </div>
          <p class="apply-time" v-if="reportData.candidate_info.applied_at">
            申请时间: {{ formatDate(reportData.candidate_info.applied_at) }}
          </p>
        </div>
      </div>
      
      <div class="overall-score">
        <div class="score-circle">
          <el-progress 
            type="circle" 
            :percentage="Math.round(reportData.scores.overall_score)" 
            :width="100"
            :stroke-width="8"
            :color="getScoreColor(reportData.scores.overall_score)"
          />
          <div class="score-label">综合评分</div>
        </div>
        <div class="current-status">
          <el-tag 
            :type="getDecisionType(reportData.final_decision)"
            size="large"
            class="status-tag"
          >
            {{ getDecisionLabel(reportData.final_decision) }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 简历分析卡片 -->
    <div class="resume-analysis-card" v-if="reportData.resume_analysis">
      <h3>
        <el-icon><Document /></el-icon>
        简历分析
      </h3>
      <div class="resume-content">
        <div class="fit-score">
          <div class="score-display">
            <el-progress 
              type="circle" 
              :percentage="reportData.resume_analysis.job_fit_score || 0" 
              :width="80"
              :stroke-width="6"
              :color="getScoreColor(reportData.resume_analysis.job_fit_score)"
            />
            <span class="fit-label">匹配度</span>
          </div>
        </div>
        
        <div class="skills-analysis">
          <div class="matched-skills" v-if="reportData.resume_analysis.core_skills_matched?.length">
            <h4>匹配技能</h4>
            <div class="skills-tags">
              <el-tag 
                v-for="skill in reportData.resume_analysis.core_skills_matched" 
                :key="skill"
                type="success"
                class="skill-tag"
              >
                {{ skill }}
              </el-tag>
            </div>
          </div>
          
          <div class="soft-skills" v-if="reportData.resume_analysis.soft_skills_detected?.length">
            <h4>软技能</h4>
            <div class="skills-tags">
              <el-tag 
                v-for="skill in reportData.resume_analysis.soft_skills_detected" 
                :key="skill"
                type="primary"
                class="skill-tag"
              >
                {{ skill }}
              </el-tag>
            </div>
          </div>
        </div>
        
        <div class="resume-summary">
          <div class="summary-item" v-if="reportData.resume_analysis.education_summary">
            <strong>教育背景:</strong> {{ reportData.resume_analysis.education_summary }}
          </div>
          <div class="summary-item" v-if="reportData.resume_analysis.experience_summary">
            <strong>工作经验:</strong> {{ reportData.resume_analysis.experience_summary }}
          </div>
        </div>
        
        <div class="resume-files">
          <el-button 
            v-if="reportData.resume_analysis.resume_file_url"
            type="primary" 
            @click="window.open(getFullVideoUrl(reportData.resume_analysis.resume_file_url), '_blank')"
          >
            <el-icon><Document /></el-icon>
            查看简历PDF
          </el-button>
          <el-button 
            v-if="reportData.resume_analysis.self_introduction_video_url"
            type="success" 
            @click="playIntroVideo"
          >
            <el-icon><Message /></el-icon>
            查看自我介绍视频
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 能力评估详情 -->
    <div class="ability-assessment">
      <h3>能力评估详情</h3>
      <div class="scores-grid">
        <div class="score-card">
          <div class="score-header">
            <h4>简历匹配度</h4>
            <span class="score-value">{{ Math.round(reportData.scores.resume_match_score) }}</span>
          </div>
          <el-progress 
            :percentage="Math.round(reportData.scores.resume_match_score)" 
            :stroke-width="6"
            :color="getScoreColor(reportData.scores.resume_match_score)"
          />
        </div>
        
        <div class="score-card">
          <div class="score-header">
            <h4>逻辑思维</h4>
            <span class="score-value">{{ Math.round(reportData.scores.logical_thinking_score) }}</span>
          </div>
          <el-progress 
            :percentage="Math.round(reportData.scores.logical_thinking_score)" 
            :stroke-width="6"
            :color="getScoreColor(reportData.scores.logical_thinking_score)"
          />
        </div>
        
        <div class="score-card">
          <div class="score-header">
            <h4>表达能力</h4>
            <span class="score-value">{{ Math.round(reportData.scores.expression_avg_score) }}</span>
          </div>
          <el-progress 
            :percentage="Math.round(reportData.scores.expression_avg_score)" 
            :stroke-width="6"
            :color="getScoreColor(reportData.scores.expression_avg_score)"
          />
        </div>
        
        <div class="score-card">
          <div class="score-header">
            <h4>创新能力</h4>
            <span class="score-value">{{ Math.round(reportData.scores.innovation_avg_score) }}</span>
          </div>
          <el-progress 
            :percentage="Math.round(reportData.scores.innovation_avg_score)" 
            :stroke-width="6"
            :color="getScoreColor(reportData.scores.innovation_avg_score)"
          />
        </div>
        
        <div class="score-card">
          <div class="score-header">
            <h4>专业技能</h4>
            <span class="score-value">{{ Math.round(reportData.scores.professional_avg_score) }}</span>
          </div>
          <el-progress 
            :percentage="Math.round(reportData.scores.professional_avg_score)" 
            :stroke-width="6"
            :color="getScoreColor(reportData.scores.professional_avg_score)"
          />
        </div>
        
        <div class="score-card">
          <div class="score-header">
            <h4>压力应对</h4>
            <span class="score-value">{{ Math.round(reportData.scores.stress_management_avg_score) }}</span>
          </div>
          <el-progress 
            :percentage="Math.round(reportData.scores.stress_management_avg_score)" 
            :stroke-width="6"
            :color="getScoreColor(reportData.scores.stress_management_avg_score)"
          />
        </div>
      </div>
    </div>
    
    <!-- AI分析总结 -->
    <div v-if="reportData.ai_summary" class="ai-analysis">
      <h3>
        <el-icon><Star /></el-icon>
        AI分析总结
      </h3>
      
      <!-- 关键能力评分 -->
      <div class="ability-scores" v-if="parsedAnalysis.abilities.length > 0">
        <h4>
          <el-icon><Check /></el-icon>
          核心能力评估
        </h4>
        <div class="abilities-grid">
          <div 
            v-for="ability in parsedAnalysis.abilities" 
            :key="ability.name"
            class="ability-card"
          >
            <div class="ability-header">
              <el-icon :class="getAbilityIcon(ability.name)"></el-icon>
              <span class="ability-name">{{ ability.name }}</span>
            </div>
            <div class="ability-score">
              <el-progress 
                :percentage="ability.score" 
                :color="getScoreColor(ability.score)"
                :stroke-width="8"
              />
              <span class="score-text">{{ ability.score }}分</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 优势分析 -->
      <div class="strengths-section" v-if="parsedAnalysis.strengths.length > 0">
        <h4>
          <el-icon><Star /></el-icon>
          核心优势
        </h4>
        <div class="strengths-list">
          <el-tag 
            v-for="strength in parsedAnalysis.strengths" 
            :key="strength"
            type="success"
            class="strength-tag"
          >
            <el-icon><Check /></el-icon>
            {{ strength }}
          </el-tag>
        </div>
      </div>
      
      <!-- 待改进项 -->
      <div class="improvements-section" v-if="parsedAnalysis.improvements.length > 0">
        <h4>
          <el-icon><Warning /></el-icon>
          待改进项
        </h4>
        <div class="improvements-list">
          <el-tag 
            v-for="improvement in parsedAnalysis.improvements" 
            :key="improvement"
            type="warning"
            class="improvement-tag"
          >
            <el-icon><Warning /></el-icon>
            {{ improvement }}
          </el-tag>
        </div>
      </div>
      
      <!-- AI推荐意见 -->
      <div class="recommendation-section" v-if="parsedAnalysis.recommendation">
        <h4>
          <el-icon><Document /></el-icon>
          AI推荐意见
        </h4>
        <div class="recommendation-card">
          <div class="recommendation-content">
            <p>{{ parsedAnalysis.recommendation }}</p>
          </div>
        </div>
      </div>
      
      <!-- 原始分析文本（可折叠） -->
      <el-collapse class="detailed-analysis">
        <el-collapse-item name="detailed" title="查看详细分析报告">
          <div class="summary-text">
            <p>{{ reportData.ai_summary }}</p>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 视频答题详情分析 -->
    <div class="video-answers-analysis" v-if="reportData.video_answers_detail?.length">
      <h3>
        <el-icon><Star /></el-icon>
        视频答题详情分析
      </h3>
      
      <!-- 多模态分析统计 -->
      <div class="multimodal-stats" v-if="reportData.multimodal_analysis_summary">
        <h4>分析覆盖统计</h4>
        <div class="stats-grid">
          <div class="stat-card">
            <span class="stat-value">{{ reportData.multimodal_analysis_summary.total_video_questions }}</span>
            <div class="stat-icon">📹</div>
            <span class="stat-label">总题目数</span>
          </div>
          <div class="stat-card">
            <span class="stat-value">{{ reportData.multimodal_analysis_summary.questions_with_audio_analysis }}</span>
            <div class="stat-icon">🎵</div>
            <span class="stat-label">音频分析</span>
          </div>
          <div class="stat-card">
            <span class="stat-value">{{ reportData.multimodal_analysis_summary.questions_with_expression_analysis }}</span>
            <div class="stat-icon">😊</div>
            <span class="stat-label">表情分析</span>
          </div>
          <div class="stat-card">
            <span class="stat-value">{{ reportData.multimodal_analysis_summary.questions_with_ai_text_analysis }}</span>
            <div class="stat-icon">🤖</div>
            <span class="stat-label">AI文本分析</span>
          </div>
        </div>
      </div>

      <!-- 各题目详细分析 -->
      <div class="video-questions-detail">
        <div 
          v-for="(answer, index) in reportData.video_answers_detail" 
          :key="answer.answer_info?.id || index"
          class="question-analysis-card"
        >
          <!-- 题目信息头部 -->
          <div class="question-header">
            <div class="question-info">
              <h4>{{ answer.question_info?.title || `题目 ${index + 1}` }}</h4>
              <el-tag 
                :type="getCategoryType(answer.question_info?.category)"
                class="category-tag"
              >
                {{ getCategoryName(answer.question_info?.category) }}
              </el-tag>
            </div>
            <div class="question-duration">
              <el-icon><Clock /></el-icon>
              {{ answer.question_info?.answer_duration || 0 }}秒
            </div>
          </div>

          <!-- 题目内容 -->
          <div class="question-content" v-if="answer.question_info?.content">
            <p>{{ answer.question_info.content }}</p>
          </div>

          <!-- 视频播放器和得分 -->
          <div class="answer-overview">
            <div class="video-player" v-if="answer.answer_info?.video_url">
              <div class="video-container">
                <video 
                  controls 
                  width="300" 
                  preload="metadata"
                  @error="handleVideoError"
                  @loadstart="handleVideoLoadStart"
                  @canplay="handleVideoCanPlay"
                  style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
                >
                  <source :src="getFullVideoUrl(answer.answer_info.video_url)" type="video/mp4" />
                  您的浏览器不支持视频播放
                </video>
                <div class="video-info">
                  <p class="answer-time">
                    <el-icon><Clock /></el-icon>
                    回答时间: {{ formatDate(answer.answer_info.answered_at) }}
                  </p>
                  <p class="video-url" v-if="getFullVideoUrl(answer.answer_info.video_url)">
                    <el-button 
                      size="small" 
                      type="text" 
                      @click="window.open(getFullVideoUrl(answer.answer_info.video_url), '_blank')"
                    >
                      <el-icon><Share /></el-icon>
                      在新窗口打开
                    </el-button>
                  </p>
                </div>
              </div>
            </div>

            <!-- 各维度得分展示 -->
            <div class="scores-overview">
              <div 
                v-for="(score, scoreKey) in getQuestionScores(answer.scores)" 
                :key="scoreKey"
                class="score-item"
              >
                <span class="score-label">{{ score.label }}:</span>
                <div class="score-bar">
                  <div 
                    class="score-fill" 
                    :style="{ width: `${score.value}%`, backgroundColor: getScoreColor(score.value) }"
                  ></div>
                </div>
                <span class="score-text">{{ score.value }}</span>
              </div>
            </div>
          </div>

          <!-- AI文本分析结果 -->
          <div class="ai-text-analysis" v-if="answer.ai_analysis?.ai_feedback">
            <h5>
              <el-icon><Document /></el-icon>
              AI文本分析
            </h5>
            <div class="analysis-content">
              <div class="extracted-text" v-if="answer.answer_info?.extracted_text">
                <strong>提取文本:</strong>
                <p>{{ answer.answer_info.extracted_text }}</p>
                <span class="confidence">
                  置信度: {{ Math.round((answer.answer_info.text_confidence || 0) * 100) }}%
                </span>
              </div>
              
              <!-- 解析后的AI反馈展示 -->
              <div class="ai-feedback-parsed" v-if="isValidParsedFeedback(answer.ai_analysis.ai_feedback)">
                <div class="parsed-feedback">
                  
                  <!-- 主要反馈内容 -->
                  <div class="feedback-content" v-if="getParsedFeedback(answer.ai_analysis.ai_feedback)?.feedback">
                    <h6><el-icon><Document /></el-icon> AI反馈</h6>
                    <p class="feedback-text">{{ getParsedFeedback(answer.ai_analysis.ai_feedback).feedback }}</p>
                  </div>

                  <!-- 评分和情感 -->
                  <div class="feedback-metrics">
                    <div class="metric-item" v-if="parseAIFeedback(answer.ai_analysis.ai_feedback)?.score !== null">
                      <span class="metric-label">AI评分:</span>
                      <el-tag 
                        :type="parseAIFeedback(answer.ai_analysis.ai_feedback).score >= 80 ? 'success' : parseAIFeedback(answer.ai_analysis.ai_feedback).score >= 60 ? 'warning' : 'danger'"
                        class="score-tag"
                      >
                        {{ parseAIFeedback(answer.ai_analysis.ai_feedback).score }}分
                      </el-tag>
                    </div>
                    <div class="metric-item" v-if="parseAIFeedback(answer.ai_analysis.ai_feedback)?.sentiment">
                      <span class="metric-label">情感倾向:</span>
                      <el-tag 
                        :type="parseAIFeedback(answer.ai_analysis.ai_feedback).sentiment === 'positive' ? 'success' : parseAIFeedback(answer.ai_analysis.ai_feedback).sentiment === 'neutral' ? 'info' : 'warning'"
                        class="sentiment-tag"
                      >
                        {{ parseAIFeedback(answer.ai_analysis.ai_feedback).sentiment === 'positive' ? '积极' : parseAIFeedback(answer.ai_analysis.ai_feedback).sentiment === 'neutral' ? '中性' : '消极' }}
                      </el-tag>
                    </div>
                  </div>

                  <!-- 优势 -->
                  <div class="strengths-section" v-if="parseAIFeedback(answer.ai_analysis.ai_feedback)?.strengths?.length">
                    <h6><el-icon><Check /></el-icon> 优势表现</h6>
                    <div class="tag-list">
                      <el-tag 
                        v-for="strength in parseAIFeedback(answer.ai_analysis.ai_feedback).strengths" 
                        :key="strength"
                        type="success"
                        size="small"
                        class="feedback-tag"
                      >
                        <el-icon><Check /></el-icon>
                        {{ strength }}
                      </el-tag>
                    </div>
                  </div>

                  <!-- 待改进项 -->
                  <div class="weaknesses-section" v-if="parseAIFeedback(answer.ai_analysis.ai_feedback)?.weaknesses?.length">
                    <h6><el-icon><Warning /></el-icon> 待改进项</h6>
                    <div class="tag-list">
                      <el-tag 
                        v-for="weakness in parseAIFeedback(answer.ai_analysis.ai_feedback).weaknesses" 
                        :key="weakness"
                        type="warning"
                        size="small"
                        class="feedback-tag"
                      >
                        <el-icon><Warning /></el-icon>
                        {{ weakness }}
                      </el-tag>
                    </div>
                  </div>

                  <!-- 改进建议 -->
                  <div class="suggestions-section" v-if="parseAIFeedback(answer.ai_analysis.ai_feedback)?.suggestions?.length">
                    <h6><el-icon><Star /></el-icon> 改进建议</h6>
                    <ul class="suggestions-list">
                      <li v-for="suggestion in parseAIFeedback(answer.ai_analysis.ai_feedback).suggestions" :key="suggestion">
                        {{ suggestion }}
                      </li>
                    </ul>
                  </div>

                  <!-- 关键词 -->
                  <div class="keywords-section" v-if="parseAIFeedback(answer.ai_analysis.ai_feedback)?.keywords?.length">
                    <h6><el-icon><Message /></el-icon> 关键词</h6>
                    <div class="tag-list">
                      <el-tag 
                        v-for="keyword in parseAIFeedback(answer.ai_analysis.ai_feedback).keywords" 
                        :key="keyword"
                        type="primary"
                        size="small"
                        class="feedback-tag"
                      >
                        {{ keyword }}
                      </el-tag>
                    </div>
                  </div>

                </div>
              </div>

              <!-- 原始AI反馈（作为备用） -->
              <div class="ai-feedback-fallback" v-else-if="answer.ai_analysis?.ai_feedback">
                <div class="ai-feedback">
                  <strong>AI反馈:</strong>
                  <p>{{ answer.ai_analysis.ai_feedback }}</p>
                </div>
                
                <div class="ai-metrics">
                  <span class="ai-score">AI评分: {{ answer.ai_analysis.ai_score }}</span>
                  <span 
                    class="sentiment" 
                    :class="`sentiment-${answer.ai_analysis.ai_sentiment}`"
                  >
                    情感: {{ answer.ai_analysis.ai_sentiment }}
                  </span>
                </div>

                <div class="keywords" v-if="answer.ai_analysis.ai_keywords?.length">
                  <strong>关键词:</strong>
                  <el-tag 
                    v-for="keyword in answer.ai_analysis.ai_keywords" 
                    :key="keyword"
                    size="small"
                    class="keyword-tag"
                  >
                    {{ keyword }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 音频分析结果 -->
          <div class="audio-analysis" v-if="answer.audio_analysis">
            <div class="audio-header">
              <h5>
                <el-icon><Message /></el-icon>
                音频分析
              </h5>
              <div class="audio-summary">
                <el-tag :type="getAudioScoreType(answer.audio_analysis.overall_audio_score)" size="small">
                  {{ getAudioScoreLevel(answer.audio_analysis.overall_audio_score) }}
                </el-tag>
                <span class="analysis-info">
                  综合得分: {{ answer.audio_analysis.overall_audio_score?.toFixed(1) || 'N/A' }}
                </span>
              </div>
            </div>

            <!-- 语音转文字 -->
            <div v-if="answer.audio_analysis.transcribed_text" class="transcription-section">
              <h6>语音转文字</h6>
              <div class="transcription-content">
                <p>解析后属性包括：</p>
                <div class="transcription-stats">
                  <span class="stat-item">
                    <el-icon><Document /></el-icon>
                    字数: {{ answer.audio_analysis.word_count || 0 }}
                  </span>
                  <span class="stat-item">
                    <el-icon><Clock /></el-icon>
                    时长: {{ answer.audio_analysis.speech_duration_seconds?.toFixed(1) || 0 }}秒
                  </span>
                </div>
              </div>
            </div>

            <!-- 核心音频指标 -->
            <div class="audio-core-metrics">
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(answer.audio_analysis.speed_score || 0) }">
                  <span class="metric-value">{{ Math.round(answer.audio_analysis.speed_score || 0) }}</span>
                </div>
                <span class="metric-label">语速</span>
                <span class="metric-detail">{{ getAudioFieldValue(answer.audio_analysis, ['speech_rate', 'speech_rate_syllables_per_second', 'average_speech_rate']) || 0 }} 音节/秒</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(answer.audio_analysis.pitch_score || 0) }">
                  <span class="metric-value">{{ Math.round(answer.audio_analysis.pitch_score || 0) }}</span>
                </div>
                <span class="metric-label">音高</span>
                <span class="metric-detail">{{ getAudioFieldValue(answer.audio_analysis, ['mean_pitch', 'average_pitch_frequency_hz', 'pitch_frequency']) || 0 }} Hz</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(answer.audio_analysis.volume_score || 0) }">
                  <span class="metric-value">{{ Math.round(answer.audio_analysis.volume_score || 0) }}</span>
                </div>
                <span class="metric-label">音量</span>
                <span class="metric-detail">{{ getAudioFieldValue(answer.audio_analysis, ['mean_volume', 'average_volume_db', 'volume_db']) || 0 }} dB</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(answer.audio_analysis.fluency_score || 0) }">
                  <span class="metric-value">{{ Math.round(answer.audio_analysis.fluency_score || 0) }}</span>
                </div>
                <span class="metric-label">流利度</span>
                <span class="metric-detail">{{ getAudioFieldValue(answer.audio_analysis, ['articulation_rate', 'articulation_rate_syllables_per_second']) || 0 }} 音节/秒</span>
              </div>
            </div>

            <!-- 详细音频指标 -->
            <div class="audio-detailed-metrics">
              <div class="metrics-grid">
                <div class="metric-item">
                  <span class="metric-label">语速得分</span>
                  <span class="metric-value">{{ answer.audio_analysis.speed_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="answer.audio_analysis.speed_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.audio_analysis.speed_score || 0)"
                  />
                </div>
                
                <div class="metric-item">
                  <span class="metric-label">音高得分</span>
                  <span class="metric-value">{{ answer.audio_analysis.pitch_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="answer.audio_analysis.pitch_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.audio_analysis.pitch_score || 0)"
                  />
                </div>
                
                <div class="metric-item">
                  <span class="metric-label">音量得分</span>
                  <span class="metric-value">{{ answer.audio_analysis.volume_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="answer.audio_analysis.volume_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.audio_analysis.volume_score || 0)"
                  />
                </div>
                
                <div class="metric-item">
                  <span class="metric-label">停顿得分</span>
                  <span class="metric-value">{{ answer.audio_analysis.pause_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="answer.audio_analysis.pause_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.audio_analysis.pause_score || 0)"
                  />
                </div>

                <div class="metric-item">
                  <span class="metric-label">流利度得分</span>
                  <span class="metric-value">{{ answer.audio_analysis.fluency_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="answer.audio_analysis.fluency_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.audio_analysis.fluency_score || 0)"
                  />
                </div>

                <div class="metric-item">
                  <span class="metric-label">发音速率得分</span>
                  <span class="metric-value">{{ answer.audio_analysis.articulation_rate_score?.toFixed(1) || 0 }}</span>
                  <el-progress 
                    :percentage="answer.audio_analysis.articulation_rate_score || 0" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.audio_analysis.articulation_rate_score || 0)"
                  />
                </div>
              </div>
            </div>

            <!-- 音频统计信息 -->
            <div class="audio-stats">
              <div class="stat-item">
                <span class="stat-label">性别识别</span>
                <span class="stat-value">{{ getGenderLabel(getAudioFieldValue(answer.audio_analysis, ['gender', 'detected_gender'])) }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">停顿频次</span>
                <span class="stat-value">{{ getAudioFieldValue(answer.audio_analysis, ['pause_frequency', 'total_pause_frequency_per_second', 'pause_count']) || 0 }} 次/秒</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">修正次数</span>
                <span class="stat-value">{{ getAudioFieldValue(answer.audio_analysis, ['correction_frequency', 'correction_count_per_second', 'correction_count']) || 0 }} 次/秒</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">F2轨迹斜率</span>
                <span class="stat-value">{{ getAudioFieldValue(answer.audio_analysis, ['f2_slope', 'f2_slope_hz_per_ms']) || 0 }} Hz/ms</span>
              </div>
            </div>

            <!-- 实时波形图 -->
            <div v-if="answer.audio_analysis.frame_data && answer.audio_analysis.frame_data.length > 0" class="waveform-section">
              <div class="waveform-header">
                <h6>实时音高和音量变化</h6>
                <el-button size="small" @click="toggleWaveformDetails(index)">
                  {{ showWaveformDetails[index] ? '收起' : '展开' }}
                </el-button>
              </div>
              
              <div v-if="showWaveformDetails[index]" class="waveform-chart">
                <div class="chart-container">
                  <canvas :ref="`waveformChart${index}`" width="800" height="300"></canvas>
                </div>
                
                <div class="waveform-legend">
                  <div class="legend-item">
                    <div class="legend-color pitch-color"></div>
                    <span>音高 (Hz)</span>
                  </div>
                  <div class="legend-item">
                    <div class="legend-color volume-color"></div>
                    <span>音量 (dB)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 表情分析结果 -->
          <div class="expression-analysis" v-if="answer.expression_analysis">
            <div class="expression-header">
              <h5>
                <el-icon><Star /></el-icon>
                表情分析
              </h5>
              <div class="expression-summary">
                <el-tag :type="getOverallEvaluationType(answer.expression_analysis.overall_evaluation)" size="small">
                  {{ answer.expression_analysis.overall_evaluation }}
                </el-tag>
                <span class="analysis-info">
                  {{ answer.expression_analysis.success_frames }}/{{ answer.expression_analysis.total_frames }} 帧
                </span>
              </div>
            </div>
            
            <!-- 核心指标 -->
            <div class="expression-core-metrics">
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(answer.expression_analysis.average_concentration) }">
                  <span class="metric-value">{{ Math.round(answer.expression_analysis.average_concentration) }}</span>
                </div>
                <span class="metric-label">专注度</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(answer.expression_analysis.emotion_avg_score) }">
                  <span class="metric-value">{{ Math.round(answer.expression_analysis.emotion_avg_score) }}</span>
                </div>
                <span class="metric-label">情绪表现</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(answer.expression_analysis.pose_avg_score) }">
                  <span class="metric-value">{{ Math.round(answer.expression_analysis.pose_avg_score) }}</span>
                </div>
                <span class="metric-label">姿态控制</span>
              </div>
              
              <div class="core-metric">
                <div class="metric-circle" :style="{ background: getScoreColor(answer.expression_analysis.gaze_avg_score) }">
                  <span class="metric-value">{{ Math.round(answer.expression_analysis.gaze_avg_score) }}</span>
                </div>
                <span class="metric-label">视线管理</span>
              </div>
            </div>
            
            <!-- 详细指标 -->
            <div class="expression-detailed-metrics">
              <div class="metrics-grid">
                <div class="metric-item">
                  <span class="metric-label">专注度评分</span>
                  <span class="metric-value">{{ answer.expression_analysis.average_concentration.toFixed(1) }}</span>
                  <el-progress 
                    :percentage="answer.expression_analysis.average_concentration" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.expression_analysis.average_concentration)"
                  />
                </div>
                
                <div class="metric-item">
                  <span class="metric-label">情绪评分</span>
                  <span class="metric-value">{{ answer.expression_analysis.emotion_avg_score.toFixed(1) }}</span>
                  <el-progress 
                    :percentage="answer.expression_analysis.emotion_avg_score" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.expression_analysis.emotion_avg_score)"
                  />
                </div>
                
                <div class="metric-item">
                  <span class="metric-label">姿态评分</span>
                  <span class="metric-value">{{ answer.expression_analysis.pose_avg_score.toFixed(1) }}</span>
                  <el-progress 
                    :percentage="answer.expression_analysis.pose_avg_score" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.expression_analysis.pose_avg_score)"
                  />
                </div>
                
                <div class="metric-item">
                  <span class="metric-label">视线评分</span>
                  <span class="metric-value">{{ answer.expression_analysis.gaze_avg_score.toFixed(1) }}</span>
                  <el-progress 
                    :percentage="answer.expression_analysis.gaze_avg_score" 
                    :stroke-width="4"
                    :show-text="false"
                    :color="getScoreColor(answer.expression_analysis.gaze_avg_score)"
                  />
                </div>
              </div>
            </div>
            
            <!-- 分析统计 -->
            <div class="expression-stats">
              <div class="stat-item">
                <span class="stat-label">分析时间</span>
                <span class="stat-value">{{ formatDate(answer.expression_analysis.analyzed_at) }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">成功帧数</span>
                <span class="stat-value">{{ answer.expression_analysis.success_frames }}/{{ answer.expression_analysis.total_frames }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">成功率</span>
                <span class="stat-value">{{ ((answer.expression_analysis.success_frames / answer.expression_analysis.total_frames) * 100).toFixed(1) }}%</span>
              </div>
            </div>
            
            <!-- 帧数据详情（如果存在） -->
            <div v-if="answer.expression_analysis.frame_data && answer.expression_analysis.frame_data.length > 0" class="frame-details">
              <div class="frame-header">
                <h6>帧分析详情</h6>
                <el-button size="small" @click="toggleFrameDetails(index)">
                  {{ showFrameDetails[index] ? '收起' : '展开' }}
                </el-button>
              </div>
              
              <div v-if="showFrameDetails[index]" class="frame-grid">
                <div 
                  v-for="(frame, frameIndex) in answer.expression_analysis.frame_data.slice(0, 6)" 
                  :key="frameIndex"
                  class="frame-item"
                >
                  <div class="frame-info">
                    <span class="frame-name">{{ frame.frame_name }}</span>
                    <el-tag size="small" :type="getEmotionType(frame.primary_emotion)">
                      {{ getEmotionLabel(frame.primary_emotion) }}
                    </el-tag>
                  </div>
                  
                  <div class="frame-scores">
                    <div class="frame-score">
                      <span>专注: {{ frame.concentration_score.toFixed(1) }}</span>
                      <el-progress 
                        :percentage="frame.concentration_score" 
                        :stroke-width="2"
                        :show-text="false"
                        :color="getScoreColor(frame.concentration_score)"
                      />
                    </div>
                    
                    <div class="frame-score">
                      <span>情绪: {{ frame.emotion_score.toFixed(1) }}</span>
                      <el-progress 
                        :percentage="frame.emotion_score" 
                        :stroke-width="2"
                        :show-text="false"
                        :color="getScoreColor(frame.emotion_score)"
                      />
                    </div>
                    
                    <div class="frame-score">
                      <span>姿态: {{ frame.pose_score.toFixed(1) }}</span>
                      <el-progress 
                        :percentage="frame.pose_score" 
                        :stroke-width="2"
                        :show-text="false"
                        :color="getScoreColor(frame.pose_score)"
                      />
                    </div>
                    
                    <div class="frame-score">
                      <span>视线: {{ frame.gaze_score.toFixed(1) }}</span>
                      <el-progress 
                        :percentage="frame.gaze_score" 
                        :stroke-width="2"
                        :show-text="false"
                        :color="getScoreColor(frame.gaze_score)"
                      />
                    </div>
                  </div>
                  
                  <div class="frame-angles">
                    <div class="angle-item">
                      <span>偏航: {{ frame.yaw_angle.toFixed(1) }}°</span>
                    </div>
                    <div class="angle-item">
                      <span>俯仰: {{ frame.pitch_angle.toFixed(1) }}°</span>
                    </div>
                    <div class="angle-item">
                      <span>翻滚: {{ frame.roll_angle.toFixed(1) }}°</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- HR审核区域 -->
    <div class="hr-review-section">
      <h3>HR审核</h3>
      
      <div class="review-form">
        <div class="form-row">
          <div class="form-item">
            <label>HR评论</label>
            <el-input 
              v-model="hrReviewForm.hr_comments"
              type="textarea"
              :rows="4"
              placeholder="请输入详细的HR评论..."
              maxlength="500"
              show-word-limit
            />
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-item">
            <label>HR评分（1-5分）</label>
            <el-rate 
              v-model="hrReviewForm.hr_rating"
              :max="5"
              show-score
              score-template="{value} 分"
              :colors="['#ff9900', '#ff9900', '#ff9900', '#f7ba2a', '#f7ba2a']"
            />
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-item">
            <label>推荐等级</label>
            <el-select 
              v-model="hrReviewForm.hr_recommendation"
              placeholder="请选择推荐等级"
              style="width: 100%"
            >
              <el-option 
                v-for="option in recommendationOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              >
                <span>{{ option.label }}</span>
                <el-tag 
                  :type="option.type"
                  size="small"
                  style="margin-left: 10px"
                >
                  {{ option.type === 'success' ? '推荐' : option.type === 'warning' ? '谨慎' : '不推荐' }}
                </el-tag>
              </el-option>
            </el-select>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-item">
            <label>最终决策</label>
            <el-select 
              v-model="hrReviewForm.final_decision"
              placeholder="请选择最终决策"
              style="width: 100%"
            >
              <el-option 
                v-for="option in decisionOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              >
                <span>{{ option.label }}</span>
                <el-tag 
                  :type="option.type"
                  size="small"
                  style="margin-left: 10px"
                >
                  {{ option.label }}
                </el-tag>
              </el-option>
            </el-select>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-item">
            <label>决策理由</label>
            <el-input 
              v-model="hrReviewForm.decision_reason"
              type="textarea"
              :rows="3"
              placeholder="请详细说明决策理由..."
              maxlength="300"
              show-word-limit
            />
          </div>
        </div>
        
        <div class="form-actions">
          <el-button 
            type="primary" 
            @click="submitHRDecision"
            :loading="submitting"
            size="large"
          >
            <el-icon><Check /></el-icon>
            提交HR决策
          </el-button>
        </div>
      </div>
    </div>
      
    <!-- 已提交的HR审核信息 -->
    <div v-if="reportData.hr_review.hr_reviewed_at" class="submitted-review">
      <h3>已提交的HR审核</h3>
      <div class="review-info">
        <div class="review-item">
          <span class="label">HR评论：</span>
          <span class="value">{{ reportData.hr_review.hr_comments }}</span>
        </div>
        <div class="review-item">
          <span class="label">HR评分：</span>
          <span class="value">
            <el-rate 
              v-model="reportData.hr_review.hr_rating"
              disabled
              show-score
              score-template="{value} 分"
            />
          </span>
        </div>
        <div class="review-item">
          <span class="label">推荐等级：</span>
          <span class="value">
            <el-tag :type="getRecommendationType(reportData.hr_review.hr_recommendation)">
              {{ getRecommendationLabel(reportData.hr_review.hr_recommendation) }}
            </el-tag>
          </span>
        </div>
        <div class="review-item">
          <span class="label">最终决策：</span>
          <span class="value">
            <el-tag :type="getDecisionType(reportData.final_decision)">
              {{ getDecisionLabel(reportData.final_decision) }}
            </el-tag>
          </span>
        </div>
        <div class="review-item">
          <span class="label">决策理由：</span>
          <span class="value">{{ reportData.decision_reason }}</span>
        </div>
        <div class="review-item">
          <span class="label">审核时间：</span>
          <span class="value">{{ formatDate(reportData.hr_review.hr_reviewed_at) }}</span>
        </div>
      </div>
    </div>
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="!loading && !generating && !reportData.ai_summary" class="error-section">
      <el-empty description="无法加载报告数据">
        <el-button type="primary" @click="getReportDetail">重新加载</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Calendar, 
  Clock, 
  Check, 
  Warning, 
  Star, 
  Document,
  Edit,
  ArrowLeft,
  Message,
  Loading,
  Share
} from '@element-plus/icons-vue'
import { hrSparkApi, sparkApi } from '@/services/api'

export default {
  name: 'EvaluationReportView',
  components: {
    Calendar,
    Clock,
    Check,
    Warning,
    Star,
    Document,
    Edit,
    ArrowLeft,
    Message,
    Loading,
    Share
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    const reportId = ref(route.params.reportId || route.query.reportId)
    const applicationId = ref(route.params.id || route.query.applicationId)
    const loading = ref(false)
    const submitting = ref(false)
    const generating = ref(false)
    const showFrameDetails = ref({})
    const showWaveformDetails = ref({})
    
    // 报告数据 - 匹配新API结构
    const reportData = ref({
      id: null,
      candidate_info: {
        name: '',
        email: '',
        phone: '',
        job_title: '',
        applied_at: null
      },
      resume_analysis: {
        job_fit_score: 0,
        core_skills_matched: [],
        soft_skills_detected: [],
        education_summary: '',
        experience_summary: '',
        resume_file_url: '',
        self_introduction_video_url: ''
      },
      scores: {
        overall_score: 0,
        resume_match_score: 0,
        logical_thinking_score: 0,
        expression_avg_score: 0,
        innovation_avg_score: 0,
        professional_avg_score: 0,
        stress_management_avg_score: 0
      },
      video_answers_detail: [],
      multimodal_analysis_summary: {
        total_video_questions: 0,
        questions_with_audio_analysis: 0,
        questions_with_expression_analysis: 0,
        questions_with_ai_text_analysis: 0
      },
      ai_summary: '',
      hr_review: {
        hr_comments: '',
        hr_rating: null,
        hr_recommendation: '',
        hr_reviewed_at: null
      },
      final_decision: 'pending',
      decision_reason: ''
    })
    
    // HR审核表单
    const hrReviewForm = reactive({
      hr_comments: '',
      hr_rating: null,
      hr_recommendation: '',
      final_decision: 'pending',
      decision_reason: ''
    })
    
    // 选项配置
    const decisionOptions = [
      { value: 'pass', label: '通过', type: 'success' },
      { value: 'conditional_pass', label: '条件通过', type: 'warning' },
      { value: 'fail', label: '不通过', type: 'danger' },
      { value: 'pending', label: '待定', type: 'info' }
    ]
    
    const recommendationOptions = [
      { value: 'strongly_recommend', label: '强烈推荐', type: 'success' },
      { value: 'recommend', label: '推荐', type: 'success' },
      { value: 'neutral', label: '中立', type: 'info' },
      { value: 'not_recommend', label: '不推荐', type: 'warning' },
      { value: 'strongly_not_recommend', label: '强烈不推荐', type: 'danger' }
    ]
    
    // 生成报告
    const generateReport = async () => {
      if (!applicationId.value) {
        ElMessage.error('缺少申请ID')
        return null
      }
      
      generating.value = true
      try {
        ElMessage.info('正在生成面试报告，请稍候...')
        const response = await sparkApi.generateReport(applicationId.value)
        
        // 检查响应结构
        if (response && response.data) {
          ElMessage.success('报告生成成功')
          return response.data.report_id || response.data.id
        } else if (response && response.success) {
          ElMessage.success('报告生成成功')
          return response.data?.report_id || response.data?.id
        } else {
          ElMessage.error('生成报告失败')
          return null
        }
      } catch (error) {
        console.error('生成报告失败:', error)
        
        // 检查是否是报告已存在的错误
        if (error.response?.data?.error === '报告已存在' && error.response?.data?.report_id) {
          ElMessage.success('报告已存在，正在加载...')
          return error.response.data.report_id
        }
        
        ElMessage.error('生成报告失败: ' + (error.response?.data?.message || error.response?.data?.error || error.message))
        return null
      } finally {
        generating.value = false
      }
    }

    // 获取报告详情
    const getReportDetail = async () => {
      // 如果没有reportId但有applicationId，先生成报告
      if (!reportId.value && applicationId.value) {
        const generatedReportId = await generateReport()
        if (generatedReportId) {
          reportId.value = generatedReportId
        } else {
          return
        }
      }
      
      if (!reportId.value) {
        ElMessage.error('缺少报告ID和申请ID')
        return
      }
      
      loading.value = true
      try {
        const response = await hrSparkApi.getReportDetail(reportId.value)
        
        // 检查响应结构
        if (response && response.data) {
          reportData.value = response.data
        } else if (response && response.success) {
          reportData.value = response.data
          
          // 初始化HR审核表单
          if (response.data.hr_review) {
            hrReviewForm.hr_comments = response.data.hr_review.hr_comments || ''
            hrReviewForm.hr_rating = response.data.hr_review.hr_rating || null
            hrReviewForm.hr_recommendation = response.data.hr_review.hr_recommendation || ''
          }
          
          hrReviewForm.final_decision = response.data.final_decision || 'pending'
          hrReviewForm.decision_reason = response.data.decision_reason || ''
          
        } else {
          ElMessage.error('获取报告详情失败')
        }
      } catch (error) {
        console.error('获取报告详情失败:', error)
        ElMessage.error('获取报告详情失败: ' + (error.response?.data?.message || error.message))
      } finally {
        loading.value = false
      }
    }
    
    // 提交HR决策
    const submitHRDecision = async () => {
      if (!reportId.value) {
        ElMessage.error('缺少报告ID')
        return
      }
      
      // 验证必填字段
      if (!hrReviewForm.hr_comments.trim()) {
        ElMessage.error('请填写HR评论')
        return
      }
      
      if (!hrReviewForm.hr_rating) {
        ElMessage.error('请选择HR评分')
        return
      }
      
      if (!hrReviewForm.hr_recommendation) {
        ElMessage.error('请选择推荐等级')
        return
      }
      
      if (!hrReviewForm.final_decision || hrReviewForm.final_decision === 'pending') {
        ElMessage.error('请选择最终决策')
        return
      }
      
      if (!hrReviewForm.decision_reason.trim()) {
        ElMessage.error('请填写决策理由')
        return
      }
      
      try {
        await ElMessageBox.confirm('确定要提交HR决策吗？', '确认提交', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        submitting.value = true
        
        const response = await hrSparkApi.submitHRDecision(reportId.value, hrReviewForm)
        
        // 检查响应结构
        if (response && (response.success || response.data)) {
          ElMessage.success('HR决策提交成功')
          // 重新加载报告数据
          await getReportDetail()
        } else {
          ElMessage.error('提交失败')
        }
        
      } catch (error) {
        if (error !== 'cancel') {
          console.error('提交HR决策失败:', error)
          ElMessage.error('提交失败')
        }
      } finally {
        submitting.value = false
      }
    }
    
    // 获取决策类型
    const getDecisionType = (decision) => {
      const option = decisionOptions.find(opt => opt.value === decision)
      return option ? option.type : 'info'
    }
    
    // 获取决策标签
    const getDecisionLabel = (decision) => {
      const option = decisionOptions.find(opt => opt.value === decision)
      return option ? option.label : decision
    }
    
    // 获取推荐类型
    const getRecommendationType = (recommendation) => {
      const option = recommendationOptions.find(opt => opt.value === recommendation)
      return option ? option.type : 'info'
    }
    
    // 获取推荐标签
    const getRecommendationLabel = (recommendation) => {
      const option = recommendationOptions.find(opt => opt.value === recommendation)
      return option ? option.label : recommendation
    }
    
    // 获取分数颜色
    const getScoreColor = (score) => {
      if (score >= 90) return '#67c23a'
      if (score >= 80) return '#409eff'
      if (score >= 70) return '#e6a23c'
      return '#f56c6c'
    }

    // 获取情绪类型
    const getEmotionType = (emotion) => {
      const types = {
        'confident': 'success',
        'neutral': 'info',
        'nervous': 'warning',
        'anxious': 'danger',
        'excited': 'success',
        'calm': 'info'
      }
      return types[emotion] || 'info'
    }

    // 获取情绪标签
    const getEmotionLabel = (emotion) => {
      const labels = {
        'confident': '自信',
        'neutral': '平静',
        'nervous': '紧张',
        'anxious': '焦虑',
        'excited': '兴奋',
        'calm': '冷静'
      }
      return labels[emotion] || emotion
    }

    // 获取综合评价类型
    const getOverallEvaluationType = (evaluation) => {
      switch (evaluation) {
        case '优秀': return 'success'
        case '良好': return 'warning'
        case '一般': return 'info'
        case '较差': return 'danger'
        default: return 'info'
      }
    }

    // 切换帧详情显示
    const toggleFrameDetails = (index) => {
      showFrameDetails.value[index] = !showFrameDetails.value[index]
    }

    // 切换波形图详情显示
    const toggleWaveformDetails = (index) => {
      showWaveformDetails.value[index] = !showWaveformDetails.value[index]
    }

    // 获取音频得分类型
    const getAudioScoreType = (score) => {
      if (score >= 80) return 'success'
      if (score >= 60) return 'warning'
      return 'info'
    }

    // 获取音频得分等级
    const getAudioScoreLevel = (score) => {
      if (score >= 80) return '优秀'
      if (score >= 60) return '良好'
      return '一般'
    }

    // 获取性别标签
    const getGenderLabel = (gender) => {
      if (gender === 'male') return '男'
      if (gender === 'female') return '女'
      return '未知'
    }

    // 绘制波形图
    const drawWaveformChart = (canvasRef, frameData) => {
      if (!frameData || frameData.length === 0) return
      
      const canvas = canvasRef
      const ctx = canvas.getContext('2d')
      const width = canvas.width
      const height = canvas.height
      
      // 清空画布
      ctx.clearRect(0, 0, width, height)
      
      // 设置背景
      ctx.fillStyle = '#f8f9fa'
      ctx.fillRect(0, 0, width, height)
      
      // 绘制网格
      ctx.strokeStyle = '#e5e7eb'
      ctx.lineWidth = 1
      
      // 水平网格线
      for (let i = 0; i <= 10; i++) {
        const y = (height / 10) * i
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(width, y)
        ctx.stroke()
      }
      
      // 垂直网格线
      for (let i = 0; i <= 20; i++) {
        const x = (width / 20) * i
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, height)
        ctx.stroke()
      }
      
      // 计算数据范围
      const pitchValues = frameData.map(frame => frame.pitch || 0)
      const volumeValues = frameData.map(frame => frame.volume || 0)
      
      const pitchMin = Math.min(...pitchValues)
      const pitchMax = Math.max(...pitchValues)
      const volumeMin = Math.min(...volumeValues)
      const volumeMax = Math.max(...volumeValues)
      
      // 绘制音高曲线
      if (pitchMax > pitchMin) {
        ctx.strokeStyle = '#409eff'
        ctx.lineWidth = 2
        ctx.beginPath()
        
        frameData.forEach((frame, index) => {
          const x = (index / (frameData.length - 1)) * width
          const normalizedPitch = (frame.pitch - pitchMin) / (pitchMax - pitchMin)
          const y = height - (normalizedPitch * height * 0.4) // 使用40%的高度给音高
          
          if (index === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        })
        
        ctx.stroke()
      }
      
      // 绘制音量曲线
      if (volumeMax > volumeMin) {
        ctx.strokeStyle = '#67c23a'
        ctx.lineWidth = 2
        ctx.beginPath()
        
        frameData.forEach((frame, index) => {
          const x = (index / (frameData.length - 1)) * width
          const normalizedVolume = (frame.volume - volumeMin) / (volumeMax - volumeMin)
          const y = height - (normalizedVolume * height * 0.4 + height * 0.5) // 使用40%的高度给音量，从50%开始
          
          if (index === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        })
        
        ctx.stroke()
      }
      
      // 添加坐标轴标签
      ctx.fillStyle = '#666'
      ctx.font = '12px Arial'
      ctx.textAlign = 'center'
      
      // X轴标签（时间）
      const timeLabels = ['0s', '25%', '50%', '75%', '100%']
      timeLabels.forEach((label, index) => {
        const x = (index / (timeLabels.length - 1)) * width
        ctx.fillText(label, x, height - 5)
      })
      
      // Y轴标签
      ctx.textAlign = 'right'
      ctx.fillText(`${Math.round(pitchMax)}Hz`, 30, 20)
      ctx.fillText(`${Math.round(pitchMin)}Hz`, 30, height * 0.4)
      ctx.fillText(`${Math.round(volumeMax)}dB`, 30, height * 0.5 + 20)
      ctx.fillText(`${Math.round(volumeMin)}dB`, 30, height - 20)
    }

    // 监听波形图显示状态变化
    const watchWaveformDetails = () => {
      nextTick(() => {
        Object.keys(showWaveformDetails.value).forEach(index => {
          if (showWaveformDetails.value[index]) {
            const canvasRef = document.querySelector(`canvas[ref="waveformChart${index}"]`)
            if (canvasRef && reportData.value.video_answers_detail[index]?.audio_analysis?.frame_data) {
              drawWaveformChart(canvasRef, reportData.value.video_answers_detail[index].audio_analysis.frame_data)
            }
          }
        })
      })
    }

    // 解析AI分析文本
    const parseAIAnalysis = (text) => {
      if (!text) return { abilities: [], strengths: [], improvements: [], recommendation: '' }
      
      const result = {
        abilities: [],
        strengths: [],
        improvements: [],
        recommendation: ''
      }
      
      try {
        // 提取能力评分
        const abilityPatterns = [
          { name: '创新能力', regex: /创新能力[^\d]*(\d+(?:\.\d+)?)[分%]?/i },
          { name: '逻辑思维', regex: /逻辑思维[^\d]*(\d+(?:\.\d+)?)[分%]?/i },
          { name: '专业技能', regex: /专业技能[^\d]*(\d+(?:\.\d+)?)[分%]?/i },
          { name: '表达能力', regex: /表达能力[^\d]*(\d+(?:\.\d+)?)[分%]?/i },
          { name: '压力应对', regex: /压力应对[^\d]*(\d+(?:\.\d+)?)[分%]?/i },
          { name: '沟通表达', regex: /沟通表达[^\d]*(\d+(?:\.\d+)?)[分%]?/i }
        ]
        
        abilityPatterns.forEach(pattern => {
          const match = text.match(pattern.regex)
          if (match) {
            const score = Math.round(parseFloat(match[1]))
            if (score > 0 && score <= 100) {
              result.abilities.push({
                name: pattern.name,
                score: score
              })
            }
          }
        })
        
        // 提取优势（在优势或优点相关内容中）
        const strengthsSection = text.match(/优势[^#]*?(?=#|$)/i)?.[0] || 
                                text.match(/优点[^#]*?(?=#|$)/i)?.[0] || ''
        
        const strengthKeywords = [
          '技术功底扎实', '创新思维', '沟通能力强', '逻辑清晰', '表达流畅',
          '专业技能突出', '学习能力强', '适应能力强', '团队协作', '责任心强',
          '技术深度', '业务理解', '解决问题', '架构设计', '代码质量'
        ]
        
        strengthKeywords.forEach(keyword => {
          if (strengthsSection.includes(keyword) || text.includes(keyword)) {
            if (!result.strengths.includes(keyword)) {
              result.strengths.push(keyword)
            }
          }
        })
        
        // 提取待改进项
        const improvementSection = text.match(/不足[^#]*?(?=#|$)/i)?.[0] || 
                                  text.match(/待提升[^#]*?(?=#|$)/i)?.[0] || 
                                  text.match(/改进[^#]*?(?=#|$)/i)?.[0] || ''
        
        const improvementKeywords = [
          '逻辑思维有待提升', '专业技能需加强', '表达能力待改进', '技术深度不足',
          '业务理解不够', '沟通技巧', '时间管理', '细节关注', '系统性思维'
        ]
        
        improvementKeywords.forEach(keyword => {
          if (improvementSection.includes(keyword) || 
              (text.includes(keyword) && (text.includes('不足') || text.includes('待') || text.includes('需要')))) {
            if (!result.improvements.includes(keyword)) {
              result.improvements.push(keyword)
            }
          }
        })
        
        // 提取推荐意见
        const recommendationSection = text.match(/推荐[^#]*?(?=#|$)/i)?.[0] || 
                                     text.match(/建议[^#]*?(?=#|$)/i)?.[0] || ''
        
        if (recommendationSection) {
          result.recommendation = recommendationSection.substring(0, 200) + '...'
        } else if (text.includes('推荐') || text.includes('建议')) {
          // 找到包含推荐的句子
          const sentences = text.split(/[。！？]/)
          const recommendSentence = sentences.find(s => s.includes('推荐') || s.includes('建议'))
          if (recommendSentence) {
            result.recommendation = recommendSentence.trim()
          }
        }
        
      } catch (error) {
        console.error('解析AI分析失败:', error)
      }
      
      return result
    }

    // 获取能力图标
    const getAbilityIcon = (abilityName) => {
      const iconMap = {
        '创新能力': 'Star',
        '逻辑思维': 'Check',
        '专业技能': 'Document',
        '表达能力': 'Message',
        '压力应对': 'Warning',
        '沟通表达': 'Message'
      }
      return iconMap[abilityName] || 'Check'
    }

    // 解析后的AI分析数据
    const parsedAnalysis = computed(() => {
      return parseAIAnalysis(reportData.value.ai_summary)
    })

    // 创建一个计算属性来缓存AI反馈解析结果
    const getParsedFeedback = (feedback) => {
      return parseAIFeedback(feedback)
    }

    // 格式化题目得分数据
    const getQuestionScores = (scores) => {
      if (!scores) return []
      
      const scoreMap = [
        { key: 'expression_score', label: '语言表达', value: scores.expression_score || 0 },
        { key: 'innovation_score', label: '创新思考', value: scores.innovation_score || 0 },
        { key: 'professional_skill_score', label: '专业技能', value: scores.professional_skill_score || 0 },
        { key: 'stress_management_score', label: '压力应对', value: scores.stress_management_score || 0 }
      ]
      
      return scoreMap.filter(score => score.value > 0)
    }

    // 获取题目类别名称
    const getCategoryName = (category) => {
      const nameMap = {
        'innovation': '创新思考类',
        'professional': '专业技能类', 
        'pressure': '压力应对类',
        'stress_management': '压力应对类'
      }
      return nameMap[category] || category || '未分类'
    }

    // 获取题目类别类型
    const getCategoryType = (category) => {
      const typeMap = {
        'innovation': 'success',
        'professional': 'primary',
        'pressure': 'warning',
        'stress_management': 'warning'
      }
      return typeMap[category] || 'info'
    }

    // 解析AI反馈JSON
    const parseAIFeedback = (feedback) => {
      if (!feedback) return null
      
      try {
        // 如果已经是对象，直接返回
        if (typeof feedback === 'object') {
          return feedback
        }
        
        // 处理字符串格式的反馈
        let jsonString = feedback.trim()
        
        // 移除markdown格式的JSON标记
        if (jsonString.startsWith('```json')) {
          jsonString = jsonString.replace(/^```json\s*/, '').replace(/\s*```$/, '')
        } else if (jsonString.startsWith('```')) {
          jsonString = jsonString.replace(/^```\s*/, '').replace(/\s*```$/, '')
        }
        
        // 尝试解析JSON字符串
        const parsed = JSON.parse(jsonString)
        return parsed
      } catch (error) {
        console.warn('AI反馈JSON解析失败，使用原始格式:', error)
        // 如果解析失败，返回null，使用备用显示
        return null
      }
    }

    // 检查是否为有效的解析结果
    const isValidParsedFeedback = (feedback) => {
      const parsed = parseAIFeedback(feedback)
      return parsed && typeof parsed === 'object' && 
             (parsed.feedback || parsed.score !== undefined || 
              parsed.keywords?.length || parsed.strengths?.length || 
              parsed.weaknesses?.length || parsed.suggestions?.length)
    }

    // 智能获取音频分析字段值
    const getAudioFieldValue = (audioAnalysis, fieldNames) => {
      if (!audioAnalysis) return null
      
      for (const fieldName of fieldNames) {
        if (audioAnalysis[fieldName] !== undefined && audioAnalysis[fieldName] !== null) {
          return audioAnalysis[fieldName]
        }
      }
      return null
    }

    // 构建完整的视频URL
    const getFullVideoUrl = (relativeUrl) => {
      if (!relativeUrl) return ''
      if (relativeUrl.startsWith('http')) return relativeUrl
      return `http://127.0.0.1:8000${relativeUrl}`
    }

    // 视频事件处理
    const handleVideoError = (event) => {
      console.error('视频加载失败:', event)
      ElMessage.error('视频加载失败，请检查网络连接')
    }

    const handleVideoLoadStart = () => {
      console.log('开始加载视频')
    }

    const handleVideoCanPlay = () => {
      console.log('视频可以播放')
    }

    // 播放自我介绍视频
    const playIntroVideo = () => {
      const videoUrl = reportData.value.resume_analysis?.self_introduction_video_url
      if (videoUrl) {
        const fullUrl = getFullVideoUrl(videoUrl)
        window.open(fullUrl, '_blank')
      } else {
        ElMessage.warning('暂无自我介绍视频')
      }
    }
    
    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return ''
      return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    
    // 返回上一页
    const goBack = () => {
      router.go(-1)
    }
    
    // 页面初始化
    onMounted(() => {
      getReportDetail()
      
      // 监听波形图显示状态变化
      watch(showWaveformDetails, watchWaveformDetails, { deep: true })
    })
    
    return {
      reportData,
      hrReviewForm,
      decisionOptions,
      recommendationOptions,
      loading,
      submitting,
      generating,
      applicationId,
      reportId,
      parsedAnalysis,
      getReportDetail,
      generateReport,
      submitHRDecision,
      getDecisionType,
      getDecisionLabel,
      getRecommendationType,
      getRecommendationLabel,
      getScoreColor,
      getAbilityIcon,
      getQuestionScores,
      getCategoryName,
      getCategoryType,
      parseAIFeedback,
      isValidParsedFeedback,
      getParsedFeedback,
      getFullVideoUrl,
      handleVideoError,
      handleVideoLoadStart,
      handleVideoCanPlay,
      playIntroVideo,
      formatDate,
      goBack,
      getEmotionType,
      getEmotionLabel,
      getOverallEvaluationType,
      toggleFrameDetails,
      showFrameDetails,
      toggleWaveformDetails,
      showWaveformDetails,
      getAudioScoreType,
      getAudioScoreLevel,
      getGenderLabel,
      drawWaveformChart,
      watchWaveformDetails,
      getAudioFieldValue
    }
  }
}
</script>

<style scoped>
.evaluation-report-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f8f9fa;
}

.loading-section {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.generating-section {
  text-align: center;
  padding: 40px 20px;
}

.generating-section .el-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 16px;
}

.generating-section h3 {
  color: #303133;
  margin: 0 0 8px 0;
  font-size: 1.2rem;
}

.generating-section p {
  color: #606266;
  margin: 0;
  font-size: 0.9rem;
}

.error-section {
  padding: 40px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.header-actions {
  margin-bottom: 20px;
}

.candidate-basic-info {
  display: flex;
  gap: 20px;
}

.candidate-avatar {
  flex-shrink: 0;
}

.candidate-details h2 {
  color: #333;
  margin: 0 0 4px 0;
}

.position {
  color: #666;
  margin: 0 0 12px 0;
}

.candidate-contact {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
}

.overall-score {
  text-align: center;
}

.score-circle {
  margin-bottom: 16px;
}

.score-label {
  margin-top: 8px;
  color: #666;
  font-size: 14px;
}

.current-status {
  margin-top: 12px;
}

.status-tag {
  font-size: 16px;
  padding: 8px 16px;
}

.ability-assessment,
.ai-analysis,
.hr-review-section,
.submitted-review {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.ability-assessment h3,
.ai-analysis h3,
.hr-review-section h3,
.submitted-review h3 {
  color: #333;
  margin-bottom: 20px;
}

.scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.score-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
}

.score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.score-header h4 {
  color: #333;
  margin: 0;
}

.score-value {
  color: #333;
  font-weight: 600;
  font-size: 18px;
}

.ai-analysis .analysis-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-text {
  color: #666;
  line-height: 1.6;
}

/* 新增的结构化展示样式 */
.ai-analysis h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-analysis h4 {
  color: #555;
  margin: 20px 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 能力评分网格 */
.abilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ability-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.ability-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.ability-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ability-name {
  font-weight: 500;
  color: #333;
}

.ability-score {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-text {
  font-weight: 600;
  color: #333;
  text-align: center;
}

/* 优势标签 */
.strengths-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.strength-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 14px;
}

/* 待改进项标签 */
.improvements-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.improvement-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 14px;
}

/* 推荐意见卡片 */
.recommendation-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  color: white;
}

.recommendation-content p {
  margin: 0;
  line-height: 1.6;
  font-size: 15px;
}

/* 详细分析折叠面板 */
.detailed-analysis {
  margin-top: 24px;
}

.detailed-analysis .summary-text {
  line-height: 1.8;
  color: #666;
  font-size: 14px;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

/* 简历分析卡片样式 */
.resume-analysis-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resume-analysis-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.resume-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fit-score {
  display: flex;
  justify-content: center;
  align-items: center;
}

.score-display {
  text-align: center;
}

.fit-label {
  display: block;
  margin-top: 8px;
  font-weight: 500;
  color: #333;
}

.skills-analysis {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  font-size: 12px;
}

.resume-summary .summary-item {
  margin: 8px 0;
  color: #666;
  line-height: 1.6;
}

.resume-files {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 视频答题分析样式 */
.video-answers-analysis {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-answers-analysis h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* 多模态统计样式 */
.multimodal-stats {
  margin-bottom: 32px;
}

.multimodal-stats h4 {
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  height: 150px;
  padding: 24px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.stat-value {
  font-size: 50px;
  font-weight: 700;
  line-height: 0.5;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 0px;
}

.stat-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  margin: 0px 0;
}

.stat-label {
  font-size: 150px;
  font-weight: 500;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(248, 242, 242, 0.938);
  margin-top: 0px;
}

/* 题目分析卡片样式 */
.question-analysis-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e5e7eb;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.question-info h4 {
  margin: 0 0 8px 0;
  color: #333;
}

.category-tag {
  margin-left: 8px;
}

.question-duration {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
}

.question-content {
  background: white;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  border-left: 4px solid #409eff;
}

.answer-overview {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.video-player {
  flex-shrink: 0;
}

.video-player video {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.answer-time {
  margin: 0;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-url {
  margin: 0;
}

.video-url .el-button {
  font-size: 12px;
  padding: 4px 8px;
}

.scores-overview {
  flex: 1;
  min-width: 250px;
}

.score-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.score-label {
  min-width: 80px;
  font-weight: 500;
  color: #333;
}

.score-bar {
  flex: 1;
  height: 12px;
  background: #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.score-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.score-text {
  min-width: 40px;
  text-align: right;
  font-weight: 600;
  color: #333;
}

/* AI文本分析样式 */
.ai-text-analysis {
  background: white;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
}

.ai-text-analysis h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #333;
}

.extracted-text {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.confidence {
  font-size: 12px;
  color: #666;
  float: right;
}

.ai-feedback {
  margin-bottom: 12px;
}

.ai-metrics {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ai-score {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.sentiment {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.sentiment-positive { background: #e8f5e8; color: #2e7d32; }
.sentiment-neutral { background: #fff3e0; color: #f57c00; }
.sentiment-negative { background: #ffebee; color: #d32f2f; }

.keywords .keyword-tag {
  margin: 2px 4px 2px 0;
}

/* 解析后的AI反馈样式 */
.ai-feedback-parsed {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.parsed-feedback {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-content h6,
.strengths-section h6,
.weaknesses-section h6,
.suggestions-section h6,
.keywords-section h6 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feedback-text {
  margin: 0;
  line-height: 1.6;
  color: #555;
  background: white;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.feedback-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.feedback-metrics .metric-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.score-tag,
.sentiment-tag {
  font-weight: 600;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
}

.suggestions-list {
  margin: 0;
  padding-left: 20px;
  color: #555;
}

.suggestions-list li {
  margin: 8px 0;
  line-height: 1.5;
}

.ai-feedback-fallback {
  /* 保持原有样式作为备用 */
}

/* 音频分析样式 */
.audio-analysis {
  background: white;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
}

.audio-analysis h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #333;
}

.audio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.audio-header h5 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
}

.audio-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.transcription-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.transcription-section h6 {
  margin: 0 0 12px 0;
  color: #1f2937;
  font-size: 14px;
}

.transcription-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.transcription-content p {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.transcription-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

.transcription-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.audio-core-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.audio-core-metrics .core-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.audio-core-metrics .metric-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.audio-core-metrics .metric-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.audio-core-metrics .metric-detail {
  font-size: 10px;
  color: #999;
}

.audio-detailed-metrics {
  margin: 20px 0;
}

.audio-detailed-metrics .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.audio-detailed-metrics .metric-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audio-detailed-metrics .metric-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.audio-detailed-metrics .metric-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.audio-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.audio-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.audio-stats .stat-label {
  font-size: 11px;
  color: #666;
}

.audio-stats .stat-value {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.waveform-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.waveform-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.waveform-header h6 {
  margin: 0;
  color: #1f2937;
  font-size: 14px;
}

.waveform-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.chart-container {
  width: 100%;
  max-width: 800px;
  height: 300px;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.waveform-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.pitch-color {
  background: #409eff;
}

.volume-color {
  background: #67c23a;
}

.audio-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 12px;
  color: #666;
}

.metric-value {
  font-weight: 600;
  color: #333;
}

/* 表情分析样式 */
.expression-analysis {
  background: white;
  border-radius: 6px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.expression-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.expression-header h5 {
  margin: 0;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.expression-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.analysis-info {
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
}

.expression-core-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.core-metric {
  text-align: center;
}

.metric-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.metric-label {
  font-size: 12px;
  color: #666;
}

.expression-detailed-metrics {
  margin-bottom: 20px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.expression-stats {
  display: flex;
  justify-content: space-between;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.stat-value {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.frame-details {
  border-top: 1px solid #e4e7ed;
  padding-top: 16px;
}

.frame-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.frame-header h6 {
  margin: 0;
  color: #333;
}

.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.frame-item {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.frame-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.frame-name {
  font-size: 12px;
  color: #666;
}

.frame-scores {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.frame-score {
  display: flex;
  align-items: center;
  gap: 8px;
}

.frame-score span {
  font-size: 11px;
  color: #666;
  min-width: 50px;
}

.frame-angles {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
}

.angle-item {
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .abilities-grid {
    grid-template-columns: 1fr;
  }
  
  .strengths-list,
  .improvements-list {
    flex-direction: column;
  }
  
  .strength-tag,
  .improvement-tag {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .stat-card {
    padding: 20px;
    gap: 10px;
  }

  .stat-icon {
    font-size: 36px;
  }

  .stat-value {
    font-size: 32px;
  }

  .stat-label {
    font-size: 16px;
  }

  .answer-overview {
    flex-direction: column;
  }

  .video-player video {
    width: 100%;
    max-width: 400px;
  }

  .audio-metrics {
    grid-template-columns: 1fr;
  }

  .pose-metrics {
    flex-direction: column;
  }

  .resume-files {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
    gap: 8px;
  }

  .stat-icon {
    font-size: 25px;
  }

  .stat-value {
    font-size: 28px;
  }

  .stat-label {
    font-size: 15px;
  }
}

.hr-review-section .review-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-form .form-row {
  display: flex;
  gap: 20px;
}

.review-form .form-item {
  flex: 1;
}

.review-form label {
  color: #333;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.review-form .el-input,
.review-form .el-select,
.review-form .el-rate {
  width: 100%;
}

.review-form .el-textarea {
  width: 100%;
}

.review-form .el-tag {
  margin-left: 10px;
}

.review-form .form-actions {
  text-align: right;
  margin-top: 20px;
}

.submitted-review .review-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.submitted-review .review-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.submitted-review .label {
  color: #666;
  font-weight: 500;
  min-width: 80px;
}

.submitted-review .value {
  color: #333;
  font-weight: 500;
  flex: 1;
}
</style> 